<!-- Primary content -->
<div class="container mx-auto px-4 py-8">
    <div class="container text-center justify-center mx-auto mb-4 text-black dark:text-white">
        <span class="flex items-center justify-center pb-4">
            <img class="rounded-xl" src="{{ .BaseURL }}{{ .Profile }}" alt="Avatar">               
        </span>
        <h1 id="prompt" class="text-2xl font-bold dark:text-white mt-4 mb-8">Are you sure you want to logout?</h1>
        <span id="green_message" class="hidden inline-flex items-center mt-4 gap-1 px-2 py-1 rounded-full text-2xl font-medium bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300"></span>
        <span id="red_message" class="hidden inline-flex items-center mt-4 gap-1 px-2 py-1 rounded-full text-2xl font-medium bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300"></span>
        <div class="flex flex-wrap block flex-column gap-3 justify-center mt-2 px-4">
            <button id="nevermind" class="w-full px-6 py-3 bg-white dark:bg-gray-600 hover:font-bold hover:bg-red-400 dark:hover:bg-red-400 text-black dark:text-white hover:text-white rounded-xl 
                    font-medium transition-all duration-300 
                    hover:shadow-lg hover:shadow-red-500/30 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 
                    active:scale-95">
            <span class="flex items-center justify-center gap-2 text-2xl">
                <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M42 34C42 32.9391 41.5786 31.9217 40.8284 31.1716C40.0783 30.4214 39.0609 30 38 30H10C8.93913 30 7.92172 30.4214 7.17157 31.1716C6.42143 31.9217 6 32.9391 6 34V38C6 39.0609 6.42143 40.0783 7.17157 40.8284C7.92172 41.5786 8.93913 42 10 42H38C39.0609 42 40.0783 41.5786 40.8284 40.8284C41.5786 40.0783 42 39.0609 42 38V34Z" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12 30V26" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M24 30V18" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M24 18C27.3137 18 30 15.3137 30 12C30 8.68629 27.3137 6 24 6C20.6863 6 18 8.68629 18 12C18 15.3137 20.6863 18 24 18Z" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>                                           
                Nevermind
            </span>
            </button>
        </div>

        <div class="flex flex-wrap block flex-column gap-3 justify-center mt-2 px-4">
            <button id="logout" type="button" class="w-full px-6 py-3 bg-white dark:bg-gray-600 hover:font-bold hover:bg-red-400 dark:hover:bg-red-400 text-black dark:text-white hover:text-white rounded-xl 
                    font-medium transition-all duration-300 
                    hover:shadow-lg hover:shadow-red-500/30 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 
                    active:scale-95">
            <span class="flex items-center justify-center gap-2 text-2xl">
                <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18 42H10C8.93913 42 7.92172 41.5786 7.17157 40.8284C6.42143 40.0783 6 39.0609 6 38V10C6 8.93913 6.42143 7.92172 7.17157 7.17157C7.92172 6.42143 8.93913 6 10 6H18" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M32 34L42 24L32 14" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M42 24H18" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>                    
                Logout
            </span>
            </button>
        </div>
    </div>
</div>

<!-- Control script -->
<script type="text/javascript" onload>

    $(`#nevermind`)[0].addEventListener("click", async function(event) {
        window.location.replace("/");
    });

    $(`#logout`)[0].addEventListener("click", async function(event) {
        event.preventDefault(); // Prevent the default behavior

        // Hide messages
        $(`#red_message`)[0].classList.add("hidden");

        // Show the loading overlay
        $(`#loadingOverlay`)[0].classList.remove("hidden");

        // Request logout
        response = await fetch("{{ .BaseURL }}/api/v1/logout");
        setTimeout(async() => {
            $(`#loadingOverlay`)[0].classList.add("hidden");

            if (response.ok) {
                $(`#logout`)[0].classList.add("hidden");
                $(`#nevermind`)[0].classList.add("hidden");
                $(`#prompt`)[0].classList.add("hidden");
                $(`#green_message`)[0].classList.remove("hidden");
                $(`#green_message`)[0].textContent = "You have been logged out.";
                
                setTimeout(async() => {
                    $(`#loadingOverlay`)[0].classList.remove("hidden");
                    if ("{{ .Redirect }}" != "") {
                        setTimeout(async() => {
                            window.location.replace("{{ .Redirect }}");
                        }, 1000);
                    } else {
                        setTimeout(async() => {
                            window.location.replace("{{ .BaseURL }}");
                        }, 1000);
                    }
                    
                }, 3000);

            } else {
                $(`#loadingOverlay`)[0].classList.add("hidden");
                $(`#red_message`)[0].classList.remove("hidden");
                $(`#red_message`)[0].textContent = await response.text();
            }
        }, 1000);
    });
</script>